<script setup>
import { computed, ref, watch, defineEmits } from 'vue'

const pname = ref('')
const cert_shiyou = ref('在**银行金融教育示范基地“金融知识大闯关”中成绩合格，准予结业')
let now = new Date()
const cert_date = computed(() => {
  return now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日'
})
const emit = defineEmits(['get-zsname'])
watch(pname, () => {
  emit('get-zsname', pname.value)
})
</script>
<template>
  <div class="zhengshu_container">
    <img class="juzhong" src="../assets/logo.png" alt="" />
    <div class="title juzhong">结业证书</div>
    <div class="name juzhong">
      <input v-model.lazy="pname" type="text" />
      同学
    </div>
    <div class="shiyou juzhong">{{ cert_shiyou }}</div>
    <div class="mudi juzhong">特发此证 以资鼓励</div>
    <div class="shouyu juzhong">**银行金融教育示范基地授予</div>
    <div class="riqi juzhong">
      签发日期
      <input :value="cert_date" type="text" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.juzhong {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.zhengshu_container {
  width: 70vh;
  height: 100vh;
  background-color: #fff;
  position: relative;
  img {
    width: auto;
    height: 10vh;
    position: absolute;
    top: 10vh;
  }
  .title {
    color: #000;
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: 0.5rem;
    position: absolute;
    top: 22vh;
  }
  .name {
    color: #aa7b59;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    font-weight: bold;
    position: absolute;
    top: 36vh;
    input {
      width: 10vw;
      height: 2rem;
      font-size: 1.6rem;
      letter-spacing: 0.1rem;
      font-weight: bold;
      text-align: center;
      border: 0;
      border-bottom: 1px solid #aa7b59;
      &:focus {
        outline: none;
      }
    }
  }
  .shiyou {
    width: 80%;
    height: 4vh;
    color: #000;
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.1rem;
    font-weight: bold;
    position: absolute;
    top: 46vh;
  }
  .mudi {
    width: 80%;
    height: 4vh;
    color: #b68e71;
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.1rem;
    font-weight: bold;
    position: absolute;
    top: 58vh;
  }
  .shouyu {
    width: 80%;
    height: 4vh;
    color: #000;
    font-size: 1.4rem;
    text-align: center;
    letter-spacing: 0.1rem;
    font-weight: bold;
    position: absolute;
    top: 72vh;
  }
  .riqi {
    color: #aa7b59;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    font-weight: bold;
    position: absolute;
    top: 80vh;
    input {
      width: 10vw;
      height: 2rem;
      font-size: 1.3rem;
      letter-spacing: 0.1rem;
      font-weight: bold;
      text-align: center;
      border: 0;
      border-bottom: 1px solid #aa7b59;
      &:focus {
        outline: none;
      }
    }
  }
}
</style>
